<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
		*{ margin: 0; padding: 0; }
		#box{ width: 750px; height: 370px; margin: 100px auto; }
		#box>ul>li{ width: 164px; height: 98px;list-style: none; float: left; margin:10px;  border: 1px solid #aaa; position: relative;  }
		#box>ul>li:hover{ border: 2px solid #0db6ca; margin: 9px; }
		#box>ul>li:hover img{ z-index: 4; position: absolute; }
		

		.show{ width: 0; height:0; background: #fff; position: absolute; z-index: 3; top:-2px; left: 162px; padding: 0; overflow: hidden; transition: all 0.3s ease; }
		.show dt{ font-weight: bold; font-size: 20px; }
		.show dd{ margin: 10px 0; font-size: 14px; color: #999; }
		.show dd li{ list-style: none; }
		.show dd span{ color: #333; margin-left: 10px; }

		#box>ul>li:hover .show{ border: 2px solid #0db6ca; display: block; width: 300px; height: 180px;  }
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li>
				<img src="images/1.jpg" alt="" />
				<div class="show">
					<dl>
						<dt>详细信息</dt>
						<dd>详细信息描述。。。</dd>
						<dd>
							<ul>
								<li>详细信息1<span>详细信息1描述。。。</span></li>
								<li>详细信息2<span>详细信息2描述。。。</span></li>
								<li>详细信息3<span>详细信息3描述。。。</span></li>
							</ul>
						</dd>
					</dl>
				</div>
			</li>
			<li>
				<img src="images/1.jpg" alt="" />
				<div class="show">
					<dl>
						<dt>详细信息</dt>
						<dd>详细信息描述。。。</dd>
						<dd>
							<ul>
								<li>详细信息1<span>详细信息1描述。。。</span></li>
								<li>详细信息2<span>详细信息2描述。。。</span></li>
								<li>详细信息3<span>详细信息3描述。。。</span></li>
							</ul>
						</dd>
					</dl>
				</div>
			</li>
			<li>
				<img src="images/1.jpg" alt="" />
				<div class="show">
					<dl>
						<dt>详细信息</dt>
						<dd>详细信息描述。。。</dd>
						<dd>
							<ul>
								<li>详细信息1<span>详细信息1描述。。。</span></li>
								<li>详细信息2<span>详细信息2描述。。。</span></li>
								<li>详细信息3<span>详细信息3描述。。。</span></li>
							</ul>
						</dd>
					</dl>
				</div>
			</li>
			<li>
				<img src="images/1.jpg" alt="" />
				<div class="show">
					<dl>
						<dt>详细信息</dt>
						<dd>详细信息描述。。。</dd>
						<dd>
							<ul>
								<li>详细信息1<span>详细信息1描述。。。</span></li>
								<li>详细信息2<span>详细信息2描述。。。</span></li>
								<li>详细信息3<span>详细信息3描述。。。</span></li>
							</ul>
						</dd>
					</dl>
				</div>
			</li>
			<li>
				<img src="images/1.jpg" alt="" />
				<div class="show">
					<dl>
						<dt>详细信息</dt>
						<dd>详细信息描述。。。</dd>
						<dd>
							<ul>
								<li>详细信息1<span>详细信息1描述。。。</span></li>
								<li>详细信息2<span>详细信息2描述。。。</span></li>
								<li>详细信息3<span>详细信息3描述。。。</span></li>
							</ul>
						</dd>
					</dl>
				</div>
			</li>
			<li>
				<img src="images/1.jpg" alt="" />
				<div class="show">
					<dl>
						<dt>详细信息</dt>
						<dd>详细信息描述。。。</dd>
						<dd>
							<ul>
								<li>详细信息1<span>详细信息1描述。。。</span></li>
								<li>详细信息2<span>详细信息2描述。。。</span></li>
								<li>详细信息3<span>详细信息3描述。。。</span></li>
							</ul>
						</dd>
					</dl>
				</div>
			</li>
			<li>
				<img src="images/1.jpg" alt="" />
				<div class="show">
					<dl>
						<dt>详细信息</dt>
						<dd>详细信息描述。。。</dd>
						<dd>
							<ul>
								<li>详细信息1<span>详细信息1描述。。。</span></li>
								<li>详细信息2<span>详细信息2描述。。。</span></li>
								<li>详细信息3<span>详细信息3描述。。。</span></li>
							</ul>
						</dd>
					</dl>
				</div>
			</li>
			<li>
				<img src="images/1.jpg" alt="" />
				<div class="show">
					<dl>
						<dt>详细信息</dt>
						<dd>详细信息描述。。。</dd>
						<dd>
							<ul>
								<li>详细信息1<span>详细信息1描述。。。</span></li>
								<li>详细信息2<span>详细信息2描述。。。</span></li>
								<li>详细信息3<span>详细信息3描述。。。</span></li>
							</ul>
						</dd>
					</dl>
				</div>
			</li>
			<li>
				<img src="images/1.jpg" alt="" />
				<div class="show">
					<dl>
						<dt>详细信息</dt>
						<dd>详细信息描述。。。</dd>
						<dd>
							<ul>
								<li>详细信息1<span>详细信息1描述。。。</span></li>
								<li>详细信息2<span>详细信息2描述。。。</span></li>
								<li>详细信息3<span>详细信息3描述。。。</span></li>
							</ul>
						</dd>
					</dl>
				</div>
			</li>
			<li>
				<img src="images/1.jpg" alt="" />
				<div class="show">
					<dl>
						<dt>详细信息</dt>
						<dd>详细信息描述。。。</dd>
						<dd>
							<ul>
								<li>详细信息1<span>详细信息1描述。。。</span></li>
								<li>详细信息2<span>详细信息2描述。。。</span></li>
								<li>详细信息3<span>详细信息3描述。。。</span></li>
							</ul>
						</dd>
					</dl>
				</div>
			</li>
			<li>
				<img src="images/1.jpg" alt="" />
				<div class="show">
					<dl>
						<dt>详细信息</dt>
						<dd>详细信息描述。。。</dd>
						<dd>
							<ul>
								<li>详细信息1<span>详细信息1描述。。。</span></li>
								<li>详细信息2<span>详细信息2描述。。。</span></li>
								<li>详细信息3<span>详细信息3描述。。。</span></li>
							</ul>
						</dd>
					</dl>
				</div>
			</li>
			<li>
				<img src="images/1.jpg" alt="" />
				<div class="show">
					<dl>
						<dt>详细信息</dt>
						<dd>详细信息描述。。。</dd>
						<dd>
							<ul>
								<li>详细信息1<span>详细信息1描述。。。</span></li>
								<li>详细信息2<span>详细信息2描述。。。</span></li>
								<li>详细信息3<span>详细信息3描述。。。</span></li>
							</ul>
						</dd>
					</dl>
				</div>
			</li>
		</ul>
	</div>
</body>
</html>